<template>
  <div>
    <br><br><br><br>
    <el-container>
      <el-aside>
        <el-row class="tac">
          <el-col>
            <el-menu
              :default-active="activeIndex"
              @select="handleSelect"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="OwnInfo"
                ><i class="el-icon-user-solid"></i>个人信息</el-menu-item
              >
              <el-menu-item index="CartView"
                ><i class="el-icon-shopping-cart-full"></i>购物车</el-menu-item
              >
              <el-menu-item index="OrderView"
                ><i class="el-icon-s-order"></i>我的订单</el-menu-item
              >
              <el-menu-item index="AddressView"
                ><i class="el-icon-s-home"></i>我的地址</el-menu-item
              >
              <el-menu-item index="MyPost"
                ><i class="el-icon-position"></i>我的帖子</el-menu-item
              >
              <el-menu-item index="MyApply"
                ><i class="el-icon-s-comment"></i>我的回复</el-menu-item
              >
              <el-menu-item index="ApplyMe"
                ><i class="el-icon-chat-dot-round"></i>回复我的</el-menu-item
              >
              <el-menu-item index="EditPost"
                ><i class="el-icon-edit-outline"></i>编辑帖子</el-menu-item
              >
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main style="height: 87vh">
        <component
          :is="currentView"
          :postId="postId"
          @toEditPost="toEditPost"
          @xiugaitouxiang="xiugaitouxiang"
          @deletePostId="deletePostId"
        ></component>
      </el-main>
    </el-container>
  </div>
</template>
    
<script>
import CartView from "@/components/person/CartView.vue";
import OwnInfo from "@/components/person/OwnInfo.vue";
import OrderView from "@/components/person/OrderView.vue";
import AddressView from "@/components/person/AddressView.vue";
import MyPost from "@/components/person/MyPost.vue";
import MyApply from "@/components/person/MyApply.vue";
import ApplyMe from "@/components/person/ApplyMe.vue";
import EditPost from "@/components/person/EditPost.vue";

export default {
  name: "PersonView", //个人中心页面，后面有个个人信息界面-OwnInfo
  props: {
    // product的论坛界面点击添加传过来一个参数然后我们这里就进入添加post界面
    post: {
      type: Boolean,
      require: true,
    },
  },
  components: {
    CartView,
    OwnInfo,
    OrderView,
    AddressView,
    MyPost,
    MyApply,
    ApplyMe,
    EditPost,
  },
  data() {
    return {
      postId:null,
      activeIndex: "CartView",
      currentView: "CartView",
    };
  },
  methods: {
    xiugaitouxiang() {
      this.$emit("xiugaitouxiang");
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.activeIndex = key;
      this.currentView = key; // 根据key动态设置要显示的组件
    },
    toEditPost(id){
      this.postId = id
      this.activeIndex = 'EditPost';
      this.currentView = 'EditPost'; 
    },
    deletePostId(){
      this.postId = null
    }
  },
  mounted() {
    //这里加一个判断，看是否有userId的存在，如果没有就跳转到登录界面。
    if (this.post == true) {
      this.activeIndex = this.currentView = "EditPost";
    }
  },
  destroyed() {
    this.$emit("noshowEditPost")
  },
};
</script>
    
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-container {
  display: flex; // 使用 flex 布局
  align-items: stretch; /* 确保子元素高度相同 */
}
.el-menu-vertical-demo {
  text-align: center;
}
.el-menu-item {
  // display: flex;
  text-align: center;
  font-size: 15px !important;
}
.el-aside {
  flex: 0 0 150px; // 设置 aside 的宽度为 150px
  // height: 470px;
  background-color: #545c64;
  color: #333;
}

.el-main {
  flex-grow: 1; // 主内容区域占据剩余空间
  background-color: #e9eef3;
  // color: #333;
  // text-align: center;
}
.el-card__body,
.el-main {
  //这里设置el-main的内边距
  padding: 20px !important;
}
</style>
    